<template>
	<!-- 投诉 -->
	<view>
		<view class="complaint">
			<view class="complaint-title">
				<text v-if="FeedbackType == 0">意见反馈</text>
				<text v-if="FeedbackType == 1 || FeedbackType == 2">投诉用户</text>
				<text v-if="FeedbackType == 3">投诉通告</text>
				<text v-if="FeedbackType == 4">投诉约单</text>
				<text v-if="FeedbackType == 5">投诉作品</text>
			</view>

			<view class="row-start" v-if="FeedbackType != 0 && FeedbackType != 1">
				<head-wear :width="90" :height="90" border-width="4" :userInfo="UserInfo"
					:WxHeadPic="UserInfo.WxHeadPic" :UserLevelID="UserInfo.UserLevelID" image-width="30"
					image-height="20" size="16" right="-7" bottom="0" oneRight="0"></head-wear>
				<view class="marginLeft-20" style="width: 66%;">
					<view class="row-start" v-if="UserInfo.UserSex">
						<view class="fs-30 one-ellipsis" style="max-width: 95%">{{ UserInfo.NickName }}</view>
						<image :src="baseUrl + 'icon/boy.png'" v-if="JSON.parse(UserInfo.UserSex).value == 1"
							class="sex-image-size marginLeft-10"></image>
						<image :src="baseUrl + 'icon/girl.png'" v-if="JSON.parse(UserInfo.UserSex).value == 0"
							class="sex-image-size marginLeft-10"></image>
						<auth-label v-if="UserInfo.isAuthOk == 2" :size="18" height="30"></auth-label>
						<personality-label v-if="UserInfo.BeautifulWomen == 1" :size="18"
							height="30"></personality-label>
						<image :src="baseUrl + 'icon/enterprise.png'" class="company-image-size marginLeft-10"></image>
					</view>
					<view class="fs-22 marginTop-8" style="color:#999;">
						<text v-for="(item,index) in UserRoles" :key="index">
							{{ item.LabelName }}
							<text v-if="index < UserRoles.length-1">，</text>
						</text>
						<text v-if="UserInfo.UserCity !== '请设置您所在的城市'">｜ {{ UserInfo.UserCity }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="padding-all-20 marignTop-20" style="background-color: #fff;">
			<view class="fs-30 bold paddingBottom-20">
				请选择投诉原因
			</view>
			<view class="row" style="flex-wrap: wrap;border-top: 1rpx #eeeeee solid;">
				<view v-for="(item,index) in options" :key="index"
					class="line-height-60 text-align-center marginTop-15 borderR-10 fs-24"
					style="width: calc((100% - 40rpx) / 3 );height: 60rpx;background:#f2f2f2;"
					:style="[{background:index == selectIndex?'#FFDD00':''},{border:index == selectIndex?'nome':''},{marginRight: (index + 1) % 3 == 0? '0': '15rpx'}]"
					@click="onSelect(item,index)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="padding-all-20 marginTop-20" style="background-color: #fff;">
			<uni-easyinput type="textarea" v-model="form.feedCauseMemo" :inputBorder="false"
				placeholder="请输入投诉内容"></uni-easyinput>
		</view>

		<view class="padding-all-20 marginTop-20" style="background-color: #fff;">
			<view class="fs-30 bold paddingBottom-20">
				证据截图
			</view>
			<view class="paddingTop-20 borderR-10" style="border-top: 1rpx #eeeeee solid;overflow: hidden;">
				<fui-upload immediate :url="imageUpfileUrl" :fileList="fileList" ref="imageUpload"
					@success="uploadSuccess" @error="uploadError" @complete="uploadComplete" Right></fui-upload>
			</view>
		</view>
		<button class="sub-btn" @click="onSubmit">提交</button>


		<view class="fs-24 padding-all-30 text-align-center fixed left right " style="color: #999;bottom: 20rpx;"
			@click="$common.goNavPage('/pages/index/complaint/complaintList')">
			查看我的历史投诉
		</view>
	</view>

</template>

<script>
	import AuthLabel from "@/components/authLabel.vue";
	import PersonalityLabel from "@/components/personalityLabel.vue";
	import HeadWear from "@/components/headwear.vue"
	export default {
		components: {
			AuthLabel,
			PersonalityLabel,
			HeadWear,
		},
		data() {
			return {
				feedPics: [],
				fileList: [],
				form: {
					feedCauseMemo: '',
					feedCauseLabels: '',
				},
				imageUpfileUrl: 'https://api.meimo.comdns.cn/common/Upload/upload?file=uniapp&type=image',
				options: [
					'盗图', '不实信息', '诈骗', '骚扰', '色情', '其他'
				],
				// 上传地址
				url: '',
				selectIndex: '',
				UserID: '',
				// 用户详情
				UserInfo: {},
				UserRoles: [],
				baseUrl: '',
				FeedbackType: '',
				TargetID: '',
			}
		},
		onLoad(params) {
			this.baseUrl = this.$baseUrl;
			this.UserID = params.UserID;
			this.FeedbackType = params.FeedbackType;
			// console.log(this.FeedbackType)
			this.TargetID = params.TargetID;
			this.getUserInfo()
		},
		onShow() {
			this.form.feedCauseLabels = '盗图'
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				this.$httpost('/UserCenter/userInfo', {
					UserID: this.UserID
				}).then(res => {
					// console.log('用户数据返回', res)
					if (res.code == 200) {
						this.UserInfo = res.data.UserInfo;
						this.UserRoles = res.data.UserRole;
					}

				})
			},
			onSelect(item, index) {
				this.selectIndex = index;
				this.form.feedCauseLabels = item
			},
			changeComplaint() {

			},
			// 上传成功是触发
			uploadSuccess(event) {
				let res = JSON.parse(event.res.data.replace(/\ufeff/g, "") || "{}")

				if (res.fileName) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的图片地址
					//e.index为图片索引值
					this.$refs.imageUpload.result(this.$baseUrl + res.fileName, event.index)
				}
				// console.log("上传成功是触发", event)
			},
			// 上传失败是触发
			uploadError(event) {
				// console.log("上传失败是触发", event)
			},

			uploadComplete(event) {
				this.feedPics = event.urls
			},

			// 提交
			onSubmit() {
				// console.log(' this.FeedbackType',  this.FeedbackType)
				let userID = uni.getStorageSync('isLogin').UserID;
				if (this.FeedbackType != 0 && this.FeedbackType != 1) {
					if (userID == this.UserInfo.UserID) {
						uni.showToast({
							title: '别投诉自己呀！',
							icon: 'none'
						})
						return;
					}
				}

				this.$httpost('/Feedback/Submit', {
					FeedbackType: this.FeedbackType,
					TargetID: this.TargetID ? this.TargetID : this.UserID,
					TargetUserID: this.UserInfo.UserID,
					FeedCauseLabels: this.form.feedCauseLabels,
					FeedCauseMemo: this.form.feedCauseMemo,
					FeedPics: this.feedPics,
				}).then(res => {
					if (res.code == 200) {
						uni.navigateBack()
						uni.showToast({
							title: '提交成功',
							duration: 1000
						});
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.complaint {
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;

		&-title {
			font-size: 34rpx;
			font-weight: bold;
			padding-bottom: 20rpx;
		}

		&-user {
			border-top: 1rpx #eeeeee solid;
			padding-top: 20rpx;
		}

	}

	.NoticeUserHeadPic {
		// position:relative;
		// width:90rpx;
		// height:90rpx;
		// border-radius:60rpx;
		// background-color:#CCC;
		// float:left;
	}
</style>